﻿<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery利用Ajax搜索框补全代码 - 站长素材</title>
</head>

<style type="text/css">
	#word{
		position: absolute;
		z-index: 99;
		width: 145px;
		height: auto;
		background-color: white;
		border: black solid 1px;
		display: none;
	}
	.click_work{
		padding-bottom: 8px;
		font-weight:lighter;
		font-size: 13px;
		cursor:pointer;/*鼠标放上变成小手*/
	}
	.click_work:hover{
		color: orange;
		background-color: gray;
	}
	.error{
		color: gray;
		cursor:pointer;/*鼠标放上变成小手*/
	}
</style>

<body>

<center>
	<h1>百度</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
	<tr>
		<td style="position: relative;">
			<input id="text" type="text" placeholder="搜索">
			<input type="button" value="Go">
			<div id="word"></div>
		</td>
	</tr>
</table>
<!-- 引入DOM -->
	<script type="text/javascript" src="public/jquery.js"></script>
	<script type="text/javascript" src="public/JsonpAjax.js"></script>
<!-- END DOM -->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>